import { Button, Checkbox, Form, Icon, Input, Row, Col } from "antd";
import * as React from "react";
import { Link } from "react-router-dom";
import { mobile } from "../../config/regexp";
import { PagePath } from "../../config/page";
import { MyAxios } from "../../config/http";
import { WrappedFormUtils } from "antd/lib/form/Form";
import GetVerifyCodeButton from "./components/verify_code_button";
const Item = Form.Item;

interface IProps {
  form: WrappedFormUtils;
  handleSubmit: (e: React.FormEvent) => void;
  loading: boolean;
}
const STYLES = {
  iconStyle: { color: "rgba(0,0,0,.25)" },
  submitBtnStyle: { width: "100%" }
};

function view(props: IProps) {
  const { getFieldDecorator, getFieldValue } = props.form;
  return (
    <div
      style={{
        margin: "auto",
        width: 300,
        textAlign: "center",
        top: 0,
        bottom: "30%",
        left: 0,
        right: 0,
        position: "absolute",
        height: 200
      }}
    >
      <h1>注册</h1>
      <Form onSubmit={props.handleSubmit}>
        <Item>
          {getFieldDecorator("username", {
            rules: [
              { required: true, message: "请输入手机号" },
              {
                pattern: RegExp(mobile),
                message: "手机号格式不正确"
              }
            ]
          })(
            <Input
              prefix={<Icon type="user" style={STYLES.iconStyle} />}
              placeholder="手机号"
            />
          )}
        </Item>
        <Item>
          <Row gutter={8}>
            <Col span={12}>
              {getFieldDecorator("verifyCode", {
                rules: [{ required: true, message: "请输入验证码" }]
              })(
                <Input
                  placeholder="验证码"
                  prefix={<Icon type="lock" style={STYLES.iconStyle} />}
                />
              )}
            </Col>
            <Col span={12}>
              <GetVerifyCodeButton
                username={getFieldValue("username")}
                form={props.form}
              />
            </Col>
          </Row>
        </Item>
        <Item>
          {getFieldDecorator("password", {
            rules: [
              { required: true, message: "请输入密码" },
              {
                pattern: new RegExp("^[0-9a-zA-Z_]{6,21}$"),
                message: "密码格式不正确(6~16位，由数字字母下划线组成)"
              }
            ]
          })(
            <Input.Password
              placeholder="密码"
              prefix={<Icon type="lock" style={STYLES.iconStyle} />}
            />
          )}
        </Item>
        <Item>
          <Button
            loading={props.loading}
            type="primary"
            style={STYLES.submitBtnStyle}
            htmlType="submit"
            onClick={(e: React.FormEvent) => {
              props.handleSubmit(e);
            }}
          >
            注册
          </Button>
          <div style={{ float: "left" }}>
            或者{" "}
            <Link to={PagePath.LOGIN} style={{ float: "right" }}>
              去登录!
            </Link>
          </div>
        </Item>
      </Form>
    </div>
  );
}

export default view;
